<template>
  <div>
    <div class="main">
      <div class="content">
        <swiper ref="mySwiper" :options="swiperOptions">
          <swiper-slide  v-for="(banner,index) in imgUrl" :key="index" >
            
            <img :src="banner.value"/>
          </swiper-slide>
          <!-- <swiper-slide>
            <div></div>
          </swiper-slide>
          <swiper-slide>
            <div></div>
          </swiper-slide>
          <swiper-slide>
            <div></div>
          </swiper-slide> -->
          <!-- 分页 -->
          <div class="swiper-pagination" slot="pagination"></div>
          <!-- 切换按钮 -->
          <!-- <div class="swiper-button-next" slot="button-next"></div>
      <div class="swiper-button-prev" slot="button-prev"></div> -->
        </swiper>
      </div>
      <h2>平台资讯</h2>
      <hr />
      <div class="news">
        <div>
          <img src="@/assets/img/background1.jpg" alt="" width="580px" />
        </div>
        <div>
          <ol>
            <li v-for="(item, index) in newsList" :key="index">
              <font  @click="detail(item)">{{ item.title }}</font>
              
              <br />
            </li>
          </ol>
        </div>
      </div>
     
    </div>
    <!-- 结尾声明 -->
    <div class="statement">
      <h5>家会更好</h5>
    </div>
  </div>
</template>
<script>
import router from "@/router/router-static";
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
import "swiper/css/swiper.css";

export default {
  name: "swiper-test",
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      backStyle: {
        backgroundImage: "url(" + require("@/assets/img/background1.jpg") + ")",
      },
      imgUrl: [],
      newsList: [],
      //dataList：[],
      // swiper配置项
      swiperOptions: {
        autoplay: true,
        // 显示个数
        slidesPerView: 1,
        // 切换个数
        slidesPerGroup: 1,
        // 分页
        pagination: {
          el: ".swiper-pagination",
        },
        // 切换按钮
        navigation: {
          // 下一个
          nextEl: ".swiper-button-next",
          // 上一个
          prevEl: ".swiper-button-prev",
        },
      },
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    detail(item){

              this.$router.push({
        path: "/newsinfo",
        query: { item },
      });
              
      
    },
    init() {
      // const baseUrl = "http://localhost:9090/";
      // // const baseUrl = this.$base.url;
      // this.imgUrl[0] =
      //   "background-image: url(" + baseUrl + "upload/picture1.jpg);";
      // this.imgUrl[1] =
      //   "background-image: url(" + baseUrl + "upload/picture2.jpg);";
      // this.imgUrl[2] =
      //   "background-image: url(" + baseUrl + "upload/picture3.jpg);";
      // console.log(this.imgUrl);
      // if (this.$storage.get("Token")) {
      //   this.$http({
      //     url: `${this.$storage.get("sessionTable")}/session`,
      //     method: "get",
      //   }).then(({ data }) => {
      //     if (data && data.code != 0) {
      //       router.push({ name: "login" });
      //     }
      //   });
      // } else {
      //   router.push({ name: "login" });
      // }
      let params = {
        page: 1,
        limit: 10,
        sort: "id",
      };

      this.$http({
        url: `config/list`,
        method: "get",
        params,
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.imgUrl = data.data.list;
          console.log(this.imgUrl)
          // this.newsList1 = data.data.list.slice(0, params.limit / 2);
          // this.newsList2 = data.data.list.slice(params.limit / 2);
        }
      });

      this.$http({
        url: `news/list`,
        method: "get",
        params,
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.newsList = data.data.list;
          // this.newsList1 = data.data.list.slice(0, params.limit / 2);
          // this.newsList2 = data.data.list.slice(params.limit / 2);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.platform {
  display: flex;
  margin: 50px 0 20px;
  height: 200px;
  width: 100%;
}
li {
  font{
    cursor: pointer;
  }
  font:hover{
    color: #507;
  }
  
}
h2 {
  margin: 50px 0 0;
}
.news {
  display: flex;
  margin: 0px 0 20px;
  div {
    width: 50%;
  }
  :nth-child(1) {
  }
  :nth-child(2) {
    font-size: 20px;
    line-height: 35px;
  }
}

.main {
  margin: 0 auto;
  padding: 0 7%;
  box-sizing: border-box;
}
.content {
  width: 80vh;
}
.swiper-slide {
  width: 100vh;
  height: 500px;
}
.swiper-slide div {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
// .swiper-slide:nth-child(1) div {
//   background-image: url(http://localhost:9090/upload/picture1.jpg);
// }
// .swiper-slide:nth-child(2) div {
//   background-image: url(http://localhost:9090/upload/picture2.jpg);
// }
// .swiper-slide:nth-child(3) div {
//   background-image: url(http://localhost:9090/upload/picture3.jpg);
// }
.content {
  // display: flex;
  // align-items: center;
  // flex-direction: column;
  width: 100%;
  // height: 100%;
  // min-height: 500px;
  // text-align: center;

  .text {
    font-size: 24px;
    font-weight: bold;
    color: #333;
  }
}
/* 页尾链接 */
.footer {
  box-sizing: border-box;
  width: 1200px;
  display: flex;
  padding: 0 50px;
  margin: 70px 0 50px;
  text-align: center;
  justify-content: space-between;
}

.f-item {
  width: fit-content;
  justify-content: left;
  align-items: flex-start;
  text-align: left;
}

.f-item p {
  cursor: pointer;
  display: block;
  color: #303030;
}
.f-item p:hover {
  color: #d05500;
}

.f-item p:first-child {
  margin-bottom: 10px;
}

/* 最后声明 */
.statement {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background-color: #68c0f9;
}

.statement h5 {
  margin-top: 10px;
  color: #555;
  font-weight: 500;
  font-size: 20px;
}
</style>